{% extends "_layouts/examples.html" %}
{% block title %}Image Container / Aspect Ratio / All{% endblock %}

{% block standalone_css %}patterns_image{% endblock %}

{% block content %}
  <section>
    <span>16:9</span>
    {% include 'docs/examples/patterns/image/container/aspect-ratio/16-9.html' %}
  </section>
  <section>
    <span>16:9 (with 16:9 image)</span>
    <div class="p-image-container--16-9 is-highlighted">
      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/7c9867c1-16x9.png" width="1200" alt="">
    </div>
  </section>
  <section>
    <span>3:2</span>
    <div class="p-image-container--3-2 is-highlighted">
      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>
  <section>
    <span>2:3</span>
    <div class="p-image-container--2-3 is-highlighted">
      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>
  <section>
    <span>2:3 (with 2:3 image)</span>
    <div class="p-image-container--2-3 is-highlighted">
      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/e97cdac9-2x3.png" width="1200" alt="">
    </div>
  </section>
  <section>
    <span>2.4:1 (Cinematic)</span>
    <div class="p-image-container--cinematic is-highlighted">
      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>
  <section>
    <span>1:1 (Square)</span>
    <div class="p-image-container--square is-highlighted">
      <img class="p-image-container__image" src="https://assets.ubuntu.com/v1/9b4c074f-Kernelt%20industries-80-short.png" width="300" alt="">
    </div>
  </section>
  <section>
    {% include 'docs/examples/patterns/image/container/aspect-ratio/responsive-all.html' %}
  </section>
{% endblock %}
